<template>
	<view class="box">
		<button class="avatar-btn">
			<view class="user">
				<image src="/static/logo.png" mode=""></image>
				<text>{{userData.name}}</text>
			</view>

		</button>

		<view class="item">
			<text>昵称</text>
			<input v-model="form.name" type="nickname" @change="onChooseWxName" placeholder="请输入昵称" />
		</view>
		<picker mode="date" @change="onBirthday">
			<view class="item">
				<text>生日</text>
				<input type="text" v-model="form.birthday" placeholder="请选择生日" disabled />
			</view>
		</picker>
		<picker @change="onGender" range-key="label" :range="genderList">
			<view class="item">
				<text>性别</text>
				<input type="text" v-model="form.sexLabel" placeholder="请选择性别" disabled />
			</view>
		</picker>
	</view>
	<button class="btn" @click="submit">保存</button>
	<text class="logout" @click="loginOut">退出登录</text>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		memberSave,
		getMemberInfoByOpenId,
		loginExit
	} from '@/api'
	import {
		wxOpenid,
		checkLogin
	} from '@/utils/login-sdk.js'
	import {
		onShow,
	} from '@dcloudio/uni-app'
	onShow(async () => {
		getUserInfo()
	})
	const userData = ref({name:""})
	const form = ref({
		birthday: "",
		sex: "",
		name: "",
		sexLabel:'',
		id:''
	})
	const genderList = ref([ {
		label: '女',
		vale:0
	},{
		label: "男",
		vale:1
	}])
	/** 获取会员信息 */
	const getUserInfo = async () => {
		const {
			openId
		} = await wxOpenid()
		const res = await getMemberInfoByOpenId({
			openId
		})
		form.value.id = res.result.id
		if(res.result.sex!=null&&res.result.sex!=''){
			form.value.sex = Number( res.result.sex)
			
			form.value.sexLabel = genderList.value[form.value.sex].label
		}
		
		
		form.value.name = res.result.name
		form.value.birthday = res.result.birthday
		
		userData.value = res.result
	}
	/** 选择生日*/
	const onBirthday = (e) => {

		form.value.birthday = e.detail.value
	}
	/** 选择性别 */
	const onGender = (e) => {
		form.value.sex = genderList.value[e.detail.value].vale
		form.value.sexLabel = genderList.value[e.detail.value].label
	}
	/***/
	const onChooseWxName = (e) => {
		form.value.name = e.detail.value
	}
	const submit = async()=>{
		const res = await memberSave(form.value)
		uni.navigateBack()
	}
	/** 退出登录 */
	const loginOut = ()=>{
		uni.showModal({
			title:'提示',
			content:'是否退出登录',
			success: async (ret) => {
				if(ret.confirm){
					const {
						openId
					} = await wxOpenid()
					await loginExit({openId:openId})
					uni.clearStorageSync()
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
			}
		})
	}
	
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
	}

	.avatar-btn {
		background: transparent;
		padding: 0;
		margin: 0;

		&::after {
			border: none;
		}
	}

	.box {
		width: 630rpx;
		padding: 0 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 32rpx auto;

		.user {
			height: 150rpx;
			display: flex;
			align-items: center;

			image {
				display: block;
				width: 96rpx;
				height: 96rpx;
				background: #F2F2F2;
				border-radius: 50%;
			}

			text {
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #16191B;
			}
		}

		.item {
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 30rpx;
				color: #16191B;
			}

			input {
				display: block;
				text-align: right;
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		display: block;
		position: absolute;
		bottom: 220rpx;
		left: 55rpx;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.logout {
		font-size: 32rpx;
		color: #FE9B23;
		position: absolute;
		left: 0;
		bottom: 150rpx;
		text-align: center;
		right: 0;
	}
</style>